import { max } from "lodash-es";

// 自定义tooltip格式化函数
const createTooltipFormatter = (chartType, tooltipData, temperatureType) => {
  return (params) => {
    if (!params || params.length === 0) return '';
    const time = params[0].axisValue;
    const timeData = tooltipData[time];
    let result = `${time}<br/>`;
    // 处理多个系列的数据
    params.forEach(param => {
      const seriesName = param.seriesName;
      const value = param.value?.value !== undefined ? param.value.value : param.value;
      const color = param.color;
      const linkName = param.data?.linkName || timeData?.linkName;
      const blockName = param.data?.blockName || timeData?.blockName;
      const locationInfo = param.data?.blockName || timeData?.blockName;
      if (value !== null && value !== undefined) {
        result += `<span style="color: ${color};">●</span> ${seriesName}: ${value}℃<br/>`;
        // 根据维度和温度类型显示位置信息
        if (chartType === 2) {
          // 电池堆维度：显示所在簇
          
          if (locationInfo && (seriesName.includes('今日') || seriesName.includes('最高') || seriesName.includes('最低'))) {
            if (temperatureType === 'max') {
              result += `<span style="color: ${color};">●</span> ${seriesName.includes('今日') ? '今日' : '昨日'}最高温度所在簇: ${linkName}-${locationInfo}<br/>`;
            } else if (temperatureType === 'min') {
              result += `<span style="color: ${color};">●</span> ${seriesName.includes('今日') ? '今日' : '昨日'}最低温度所在簇: ${linkName}-${locationInfo}<br/>`;
            }

          }
        } else if (chartType === 3) {
          // 电站维度：显示所在位置
          if ((linkName || blockName) && (seriesName.includes('今日') || seriesName.includes('最高') || seriesName.includes('最低'))) {
            if (temperatureType === 'max') {
              result += `<span style="color: ${color};">●</span> ${seriesName.includes('今日') ? '今日' : '昨日'}最高温度所在簇: ${linkName}-${locationInfo}<br/>`;
            } else if (temperatureType === 'min') {
              result += `<span style="color: ${color};">●</span> ${seriesName.includes('今日') ? '今日' : '昨日'}最低温度所在簇: ${linkName}-${locationInfo}<br/>`;
            }

          }
        }
      }
    });
    return result.replace(/<br\/>$/, ''); // 移除最后的换行
  };
};

const grid = {
  top: '80',
  right: '3%',
  bottom: '15%',
  left: '60'
}
const xAxis = {
  type: 'category',
  boundaryGap: false,
  data: [],
  axisLabel: {
    formatter: (value) =>  //X轴的内容
    {

      let ret = ""; //拼接加\n返回的类目项
      let max = 10;  //每行显示的文字字数
      let val = value.length;  //X轴内容的文字字数
      let rowN = Math.ceil(val / max);  //需要换的行数
      if (rowN > 1)  //判断 如果字数大于2就换行
      {
        for (let i = 0; i < rowN; i++) {
          let temp = "";  //每次截取的字符串
          let start = i * max;  //开始截取的位置
          let end = start + max;  //结束截取的位置
          temp = value.substring(start, end) + "\n";
          ret += temp;  //最终的字符串
        }
        return ret;
      }
      else { return value }
    }
  }
}
const baseOption = {
  title: {
    x: 'center',
    y: 'top',
    textStyle: {
      fontSize: 16,
      color: '#fff'
    },
    top: '10',
  },
  grid,
  tooltip: {
    trigger: 'axis',
    backgroundColor: "rgba(13, 20, 41, 0.9)",
    borderColor: "rgba(8, 146 ,164, 0.5)",
    borderWidth: 1,
    padding: [10, 15],
    textStyle: {
      color: '#fff',
      fontSize: 14
    }
  },
  legend: {
    textStyle: {
      color: '#fff'
    },
    top: '40',
    data: [],
  },
  xAxis,
  yAxis: {
    type: 'value'
  },
  series: []
};
export const getTemperatureOption = (type, chartType = 1, tooltipData = {}) => {
  const isMax = type === 'max';
  const prefix = isMax ? '最高' : '最低';
  const temperatureType = isMax ? 'max' : 'min';

  return {
    ...baseOption,
    title: {
      ...baseOption.title,
      text: `电站单体${prefix}温度`,
    },
    tooltip: {
      ...baseOption.tooltip,
      formatter: createTooltipFormatter(chartType, tooltipData, temperatureType),
    },
    legend: {
      ...baseOption.legend,
      data: [`今日单体${prefix}温度`, `昨天单体${prefix}温度`],
    },
    dataZoom: [
      {
        type: "inside", // 鼠标滚轮缩放
        xAxisIndex: [0, 1], // 同时作用于两个x轴
        start: 0, // 初始化时滚动条位置
        end: 100, // 初始化时滚动条位置
      },
      {
        show: true, // 显示滚动条
        type: "slider", // 滚动条类型
        xAxisIndex: [0, 1], // 同时作用于两个x轴
        start: 0, // 初始化时滚动条位置
        end: 100, // 初始化时滚动条位置
        height: 20, // 滚动条高度
        bottom: 10, // 滚动条距离底部距离
        borderColor: "#ccc", // 滚动条边框颜色
        fillerColor: "rgba(167,183,204,0.4)", // 滚动条填充颜色
        handleColor: "#fff", // 滚动条手柄颜色
        handleSize: "100%", // 滚动条手柄尺寸
      },
    ],
    series: [
      {
        name: `今日单体${prefix}温度`,
        data: [],
        type: "line",
        symbol: "circle",
        itemStyle: {
          normal: {
            color: "#76c0de",
            lineStyle: {
              color: "#76c0de",
            },
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(118,192,222, 1)",
              },
              {
                offset: 1,
                color: "rgba(118,192,222, 0)",
              },
            ],
            global: false,
          },
        },
      },
      {
        name: `昨天单体${prefix}温度`,
        data: [],
        type: "line",
        symbol: "circle",
        itemStyle: {
          normal: {
            color: "#f9ca59",
            lineStyle: {
              color: "#f9ca59",
            },
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(249,202,89,0.3)",
              },
              {
                offset: 1,
                color: "rgba(249,202,89,0.3)",
              },
            ],
            global: false,
          },
        },
      },
    ],
  };
};

export const diffOption = {
  ...baseOption,
  title: {
    ...baseOption.title,
    text: `电站温差`,
  },
  tooltip: {
    ...baseOption.tooltip,
    formatter: createTooltipFormatter(null, {}, 'diff'), // 温差图表不需要位置信息
  },
  legend: {
    ...baseOption.legend,
    data: [`今日单体温差`, `昨天单体温差`],
  },
  dataZoom: [
    {
      type: "inside", // 鼠标滚轮缩放
      xAxisIndex: [0, 1], // 同时作用于两个x轴
      start: 0, // 初始化时滚动条位置
      end: 100, // 初始化时滚动条位置
    },
    {
      show: true, // 显示滚动条
      type: "slider", // 滚动条类型
      xAxisIndex: [0, 1], // 同时作用于两个x轴
      start: 0, // 初始化时滚动条位置
      end: 100, // 初始化时滚动条位置
      height: 20, // 滚动条高度
      bottom: 10, // 滚动条距离底部距离
      borderColor: "#ccc", // 滚动条边框颜色
      fillerColor: "rgba(167,183,204,0.4)", // 滚动条填充颜色
      handleColor: "#fff", // 滚动条手柄颜色
      handleSize: "100%", // 滚动条手柄尺寸
    },
  ],
  series: [
    {
      name: `今日单体温差`,
      data: [],
      type: "line",
      symbol: "circle",
      itemStyle: {
        normal: {
          color: "#76c0de",
          lineStyle: {
            color: "#76c0de",
          },
        },
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(118,192,222, 1)",
            },
            {
              offset: 1,
              color: "rgba(118,192,222, 0)",
            },
          ],
          global: false,
        },
      },
    },
    {
      name: `昨天单体温差`,
      data: [],
      type: "line",
      symbol: "circle",
      itemStyle: {
        normal: {
          color: "#f9ca59",
          lineStyle: {
            color: "#f9ca59",
          },
        },
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(249,202,89,0.3)",
            },
            {
              offset: 1,
              color: "rgba(249,202,89,0.3)",
            },
          ],
          global: false,
        },
      },
    },
  ],

};